<!-- eslint-disable -->
<template>
  <div class="">
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
      <el-form-item label="菜单名称" prop="menuName">
        <el-input
          v-model="queryParams.menuName"
          placeholder="请输入菜单名称"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="default">
            <el-option label="开启" value="0">开启</el-option>
          <el-option label="关闭" value="1">停用</el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
 <el-row>
   <el-space>
     <el-button @click="handleAdd">添加</el-button>
     <el-button @click="handleDel">删除</el-button>
   </el-space>
 </el-row>

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="menuId"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      indent="10"
    >
      <el-table-column
        prop="menuName"
        label="菜单名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="component"
        label="组件地址"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="perms"
        label="权限字符"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="remark"
        label="描述"
      >
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
      >
      </el-table-column>

      <el-table-column
        prop="createBy"
        label="创建人"
      >
      </el-table-column>

      <el-table-column
        prop="updateTime"
        label="修改时间"
      >
      </el-table-column>

      <el-table-column
        prop="updateBy"
        label="修改时间"
      >
      </el-table-column>

      <el-table-column
        :label="$t('msg.role.action')"
        prop="action"
        width="260"
        #default="{ row }">
        <el-space>
          <el-button type="text" @click="handleEdit(row)">修改</el-button>
          <el-button type="text" @click="handleDel(row)">删除</el-button>
        </el-space>

      </el-table-column>


    </el-table>

    <el-dialog :title="title" v-model="visible" width="580px" :inline="true">
      <div>
        <el-form ref="formRef" :model="form" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="父级菜单" prop="parentId">
                <el-tree-select
                  v-model="form.parentId"
                  :data="menuOptions"
                  :props="{ label:'menuName' ,value:'menuId',children: 'children'}"
                  :show-count="true"
                  @change="handleChange"
                  check-strictly
                  clearable
                >
                </el-tree-select>

              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="form.menuType">
                  <el-radio value="M">目录</el-radio>

                  <el-radio value="C">菜单</el-radio>
                  <el-radio value="F">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标" prop="icon">
                <el-input v-model="form.icon"></el-input>
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="菜单名称" prop="menuName">
                <el-input v-model="form.menuName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.menuType!='F'">
              <el-form-item label="是否外链" prop="isFrame">
                <el-radio-group v-model="form.isFrame">
                  <el-radio value="0" label="是"></el-radio>
                  <el-radio value="1" label="否"></el-radio>
                </el-radio-group>

              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="菜单排序" prop="sort">
                <el-input-number v-model="form.sort"></el-input-number>
              </el-form-item>
            </el-col>


            <el-col :span="12" v-if="form.menuType=='C'">
              <el-form-item label="组件地址" prop="component">
                <el-input v-model="form.component"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.menuType!='F'">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="form.path"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限字符" prop="perms">
                <el-input v-model="form.perms" />
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="form.menuType=='C'">
              <el-form-item label="路由参数" prop="path">
                <el-input v-model="form.path"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.menuType == 'C'">
              <el-form-item label="是否缓存" prop="path">

                <el-radio-group v-model="form.path">
                  <el-radio value="0" label="是"></el-radio>
                  <el-radio value="1" label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="菜单状态">
                <el-radio-group v-model="form.status ">
                  <el-radio value="0" label="正常"></el-radio>
                  <el-radio value="1" label="停用"></el-radio>
                </el-radio-group>

              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="form.menuType!='F'">
              <el-form-item label="显示状态" prop="isVisible">

                <el-radio-group v-model="form.visible">
                  <el-radio value="0" label="显示"></el-radio>
                  <el-radio value="1" label="隐藏"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="描述" prop="remark">
                <el-input
                  type="textarea"
                  autosize
                  v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">

            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="菜单名称" prop="menuName">-->
            <!--                <el-input v-model="form.menuName"></el-input>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->

          </el-row>
          <el-row :gutter="20" v-if="form.menuType!='F'">


          </el-row>
<!--          <el-row :gutter="20">-->

<!--          </el-row>-->

<!--          <el-row :gutter="20">-->


<!--          </el-row>-->
<!--          <el-row>-->


<!--          </el-row>-->

<!--          <el-row :gutter="20">-->

<!--          </el-row>-->
<!--          <el-row :gutter="20">-->

<!--          </el-row>-->

        </el-form>
      </div>
      <span slot="footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { permissionList } from '@/api/permission'
import { addMenu, MenuTreeList, getMenuInfo, editMenu, delMenu } from '@//api/menu'
import { watchSwitchLang } from '@/utils/i18n'
import { handleError, onMounted, onUnmounted, ref } from 'vue'

import { ElMessage } from 'element-plus'

/**
 * 权限分级：
 * 1. 一级权限为页面权限
 *  permissionMark 对应 路由名称
 * 2. 二级权限为功能权限
 *  permissionMark 对应 功能权限表
 */
// 所有权限
const allPermission = ref([])
const selected = ref([])
const tableData = ref([])
const visible = ref(false)
const form = ref({
  parentId: '',
  menuName: '',
  menuType: '',
  path: '',
  component: '',
  isFrame: '',
  perms: '',
  query: '',
  icon: '',
  isCache: '',
  visible: '',
  status: '',
  sort: '',
  remark:''
})
const queryParams=ref({})
const showSearch=ref(true);
const queryFormRef=ref()
const options = ref([])
const title = ref('')
const formRef = ref()
const menuOptions = ref([])

const getPermissionList = () => {
  // const response= await permissionList()
  //  const {data}=response;
  // debugger;
  //  allPermission.value=data;
  console.log('返回的角色数据', data)

}
const getDataList = () => {
  MenuTreeList(queryParams.value).then(response => {

    const { data } = response
    // 确保 data.menus 是一个数组
    const menus = Array.isArray(data.menus) ? data.menus : []
    // 定义根节点
    const rootNode = {
      menuId: '000', // 根节点的ID
      menuName: '根节点', // 根节点的名称
      children: menus // 将 menus 设置为根节点的子节点
    }
    // 将根节点添加到 options 数据中
    menuOptions.value = [rootNode]

    tableData.value = data.menus
    // options.value=menuOptions.value
    // allPermission.value=data.menus

    console.log('权限-0125', menuOptions)
  })
}
const handleAdd = (row) => {
  visible.value = true
  title.value = '添加'
  if (row != null && row.menuId) {
    console.log('菜单id', row.menuId)
    form.value.parentId = row.menuId
  } else {
    form.value.parentId = '000'
    console.log('')
  }
}
const handleEdit = (row) => {
  title.value = '修改'
  visible.value = true
  console.log(row.menuId)
  if (row != null && row.menuId) {
    console.log('菜单id', row.menuId)
    form.value.parentId = row.menuId
  } else {
    form.value.parentId = '000'
    console.log('')
  }
  getMenuInfo(row.menuId).then(rescape => {
    const { data } = rescape
    form.value = data
    console.log(rescape)
    form.value.parentId = row.menuId
  })
}
const handleDel = (value) => {
  const ids = [value.menuId] || selected.value
  console.log('删除数据：', ids)
  delMenu(ids).then(response => {
    getDataList()
  })

}


const reset = () => {
  form.value = {}

}

const submitForm = () => {
  console.log(form.value)
  if (form.value.menuId != undefined) {
    debugger
    console.log('修改：', form.value)
    editMenu(form.value).then(resopnse => {
      visible.value = false
      getDataList()
    })

  } else {
    debugger
    addMenu(form.value).then(response => {
      console.log(response)
      if (response.code === 200) {

        ElMessage({
          message: response.message,
          type: 'success'
        })
        visible.value = false
      } else {

        ElMessage.error(response.message)
      }
      getDataList()
    })
  }

}
const cancel = () => {
  visible.value = false
  reset()
}
const handleChange = (selectedValues, selectedOptions) => {
  console.log('级联选择：', selectedValues, selectedOptions)


}


const handleQuery=()=>{
  getDataList()
}
const  resetQuery=()=>{

}
const mounted = onMounted(() => {
  getDataList()
})
</script>
